<template>
  <view class="navbar" :class="{ fixed: isFixed }" :style="compStyle">
    <view class="status-bar" :style="{ height: state.statusBarHeight + 'px' }"></view>

    <template v-if="mode === 'base'">
      <view class="flex center navbar-content" :style="{ height: state.navbarHeight + 'px' }">
        <view class="before slot" v-if="$slots.before">
          <slot name="before" />
        </view>
        <template v-else>
          <view class="before default" v-if="leftArrow" @click="back">
            <image class="icon" :src="backIcon || $oss('/common/arrow_left_black.png')" />
          </view>
        </template>

        <view class="center" :style="{
          width: state.navbarWidth + 'px',
          opacity: isFadeIn ? fadeInColor?.opacity : 1
        }">{{ title }}
        </view>
      </view>
    </template>

    <template v-if="mode === 'full'">
      <view class="flex align-center navbar-content" :style="{ height: state.navbarHeight + 'px' }">
        <view class="center" :style="{ width: state.navbarWidth + state.beforeWidth + 'px' }">
          <slot />
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { computed, onMounted, ref, toRaw } from 'vue'
import { paserStyleStr } from '../utils/index'
import { useNavbarRect } from '../hooks/navbar'
import { back } from '@/utils/router'
import { useBgColorFadeIn } from './hooks'

export default {
  name: 'Navbar',
  options: { styleIsolation: 'shared' },
  props: {
    /**
     * base: 基础模式, 包含 before、center、after
     * full: 占满模式, 只有center, center宽度 = windowWidth - afterWidth
     */
    mode: {
      type: String,
      default: 'base'
    },
    isFixed: Boolean,

    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    },

    // 导航标题
    title: String,

    // 是否显示返回图标
    leftArrow: {
      type: Boolean,
      default: true
    },
    backIcon: String,

    isFadeIn: Boolean,

    bgColor: {
      type: String,
      default: 'transparent'
    }
  },
  setup (props, { emit }) {
    /**
     * @property {Number} statusBarHeight - 状态栏高度
     * @property {Number} menubarHeight - menubar 高度
     * @property {Number} beforeWidth - before 容器宽度
     * @property {Number} navbarWidth - 实际 navbar 宽度
     * @property {Number} navbarHeight - 实际 navbar 高度
     */
    const state = ref({
      statusBarHeight: 20,
      menubarHeight: 0,
      beforeWidth: 0,
      navbarWidth: 0,
      navbarHeight: 44
    })
    onMounted(() => {
      state.value = useNavbarRect()

      emit('update-rect', state.value)
    })

    const propStyle = computed(() => {
      const style = Object.assign(
        { 'background-color': props.bgColor },
        { ...props.customStyle }
      )

      return style
    })
    const compStyle = computed(() => {
      let style = toRaw(propStyle.value)

      if (props.isFadeIn && fadeInColor.value) {
        style['background-color'] = fadeInColor.value.color
      }

      style = paserStyleStr(style)

      return style
    })

    const nh = computed(() => {
      return state.value.statusBarHeight + state.value.navbarHeight
    })
    const fadeInColor = useBgColorFadeIn(compStyle, nh)

    return {
      state,

      compStyle,
      fadeInColor,
      back
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  &.fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5;
  }

  .navbar-content {
    .before {
      position: absolute;
      left: 0;

      &.default {
        .icon {
          width: 28rpx;
          height: 28rpx;
          margin: 0 32rpx;
        }
      }
    }

    .center {
      flex: none;
      text-align: center;
      font-size: 34rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
